<!DOCTYPE html>
<html>

<head>
    <script src='./ocrad.js'></script>
</head>

<body>
    <div>

        <input type="file" id="file-1" class="inputfile" onchange="change()" />
        <div>
            <span id="startPre">
                <a id="startLink" onclick="recognizeText()" href="#">Click here to recognize text</a> or choose your own
                image
            </span>
        </div>
        <img id="image-img"></img>
        <div id="log">
        </div>
    </div>
    <script>
        function recognizeText() {
            var file = document.getElementById('file-1').files[0];
            if (!file) {
                return;
            }
            var img = document.getElementById('image-img');
            var string = OCRAD(img);
            var log = document.getElementById('log');
            log.innerHTML = '';
            var pre = document.createElement('pre')
            pre.appendChild(document.createTextNode(string))
            log.append(pre)

        }

        function change() {
            var file = document.getElementById('file-1').files[0];
            if (!file) {
                return;
            }
            var img = document.getElementById('image-img');
            img.src = window.URL.createObjectURL(file)

        }


    </script>
</body>

</html>